<template>
    <view class="lists">
        <scroll-view :scroll-top="scrollTop" :scroll-with-animation="true" scroll-y="true" class="scroll-Y scroll" id="view1">
            <BaseChart :empi="userInfo.empi" :chartInfo="heightInfo" id="height" />
            <BaseChart :empi="userInfo.empi" :chartInfo="weightInfo" id="weight" />
            <BaseChart :empi="userInfo.empi" :chartInfo="bmiInfo" id="bmi" />
            <BaseChart :empi="userInfo.empi" :chartInfo="whrInfo" id="whr" />
            <BloodInfo :empi="userInfo.empi" :type="type" id="sbp" />
            <BaseChart :empi="userInfo.empi" :chartInfo="heartInfo" id="heart_rate" />
            <BloodSugarInfo :empi="userInfo.empi" :type="type" id="fbg" />
            <BaseChart :empi="userInfo.empi" :chartInfo="oxygenInfo" id="spo2" />
            <!-- <view style="height: 660rpx;"></view> -->
        </scroll-view>
    </view>
</template>
  
<script setup lang="ts">
import BaseChart from './baseInfo.vue'
import BloodInfo from './bloodInfo.vue'
import BloodSugarInfo from './bloodSugarInfo.vue'
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { debounce } from '@/utils/tools'

const type = ref('')
const userInfo = ref({})

const scrollTop = ref(0)
const distanceArr = ref([])

const heightInfo = {
    title: '身高',
    value: 'height',
    color: '#5089FE',
    unit: '单位: cm',
    offsetX: 0,
    min: 0,
    max: 250,
    splitNumber: 5,
}
const weightInfo = {
    title: '体重',
    value: 'weight',
    color: '#FF813C',
    unit: '单位: kg',
    offsetX: 0,
    min: 0,
    max: 200,
    splitNumber: 5,
}
const bmiInfo = {
    title: 'BMI',
    value: 'bmi',
    color: '#1CD7AE',
    unit: '单位: kg/m²',
    offsetX: 15,
    min: 0,
    max: 100,
    splitNumber: 5,
    markLine: {
        type: 'dash',
        dashLength: 8,
        data: [
            { 
                value: 18.5,
                lineColor: '#1CD7AE',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
                labelOffsetY: 10,
            },
            { 
                value: 23.9,
                lineColor: '#1CD7AE',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
                labelOffsetY: -10,
            },
        ]
    }
}
const whrInfo = ref({
    title: '腰臀比',
    value: 'whr',
    color: '#8B89E9',
    unit: '',
    offsetX: 0,
    min: 0,
    max: 1.5,
    splitNumber: 5,
    markLine: {
        type: 'dash',
        dashLength: 8,
        data: [
            { 
                value: 0.85,
                lineColor: '#8B89E9',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
            },
        ]
    }
})
const heartInfo = {
    title: '心率',
    value: 'heartRate',
    color: '#0CB67C',
    unit: '单位: 次/分',
    offsetX: 20,
    min: 0,
    max: 180,
    splitNumber: 6,
    markLine: {
        type: 'dash',
        dashLength: 8,
        data: [
            { 
                value: 60,
                lineColor: '#0CB67C',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
            },
            { 
                value: 100,
                lineColor: '#0CB67C',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
            },
        ]
    }
}
const oxygenInfo = {
    title: '血氧',
    value: 'spo2',
    color: '#50B5FE',
    unit: '单位: %',
    offsetX: 0,
    min: 0,
    max: 100,
    splitNumber: 5,
    markLine: {
        type: 'dash',
        dashLength: 8,
        data: [
            { 
                value: 95,
                lineColor: '#50B5FE',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
                labelOffsetY: 10,
            },
            { 
                value: 100,
                lineColor: '#50B5FE',
                showLabel: true,
                labelAlign: 'right',
                labelPadding: 1,
                labelBgOpacity: 0,
                labelBgColor: '#fff',
                labelFontSize: 12,
                labelOffsetY: -10,
            },
        ]
    }
}

onLoad((option) => {
    type.value = option.type ? option.type : ''

    nextTick(async () => {
        await getHeight('#height').then((height) => {
            distanceArr.value.push({ name: 'height', top: height})
        })
        await getHeight('#weight').then((height) => {
            distanceArr.value.push({ name: 'weight', top: height})
        })
        await getHeight('#bmi').then((height) => {
            distanceArr.value.push({ name: 'bmi', top: height})
        })
        await getHeight('#whr').then((height) => {
            distanceArr.value.push({ name: 'whr', top: height})
        })
        await getHeight('#sbp').then((height) => {
            distanceArr.value.push({ name: 'sbp', top: height})
        })
        await getHeight('#heart_rate').then((height) => {
            distanceArr.value.push({ name: 'heart_rate', top: height})
        })
        await getHeight('#fbg').then((height) => {
            distanceArr.value.push({ name: 'fbg', top: height})
        })
        await getHeight('#spo2').then((height) => {
            distanceArr.value.push({ name: 'spo2', top: height})
        })
        scrollTop.value = distanceArr.value.find(item => type.value == item.name).top || 0
    })
})
onShow(() => {
    userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    whrInfo.value.markLine.data[0].value = userInfo.value.gender == '女性' ? 0.85 : 0.9
})

const getHeight = (str) => {
  return new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery()
    query
      .select(str)
      .boundingClientRect((data) => {
        resolve(data.top)
      })
      .exec()
  })
}


</script>
  
<style lang="scss" scoped>
.lists {
    height: 100vh;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    .scroll-Y {
        height: 100%;
        box-sizing: border-box;
    }
}
</style>
  